<template>
  <div class="tinymce-container" :style="{width:containerWidth}">
    <Editor :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue" @onClick="onClick">
    </Editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'//编辑器引入
import '../../../static/plugins/tinymce/themes/silver/theme'//编辑器主题
import '../../../static/plugins/tinymce/icons/default'  //引入编辑器图标icon，不引入则不显示对应图标
// 引入编辑器插件（基本免费插件都在这儿了）
import '../../../static/plugins/tinymce/plugins/advlist'  //高级列表
import '../../../static/plugins/tinymce/plugins/autolink'  //自动链接
import '../../../static/plugins/tinymce/plugins/link'  //超链接
import '../../../static/plugins/tinymce/plugins/image'  //插入编辑图片
import '../../../static/plugins/tinymce/plugins/lists' //列表插件
import '../../../static/plugins/tinymce/plugins/charmap'  //特殊字符
import '../../../static/plugins/tinymce/plugins/media' //插入编辑媒体
import '../../../static/plugins/tinymce/plugins/wordcount'// 字数统计
let zh_CN = "/static/plugins/tinymce/langs/zh_CN.js"
let skin_url = '/static/plugins/tinymce/skins/ui/oxide'

const fonts = [
  "宋体=宋体",
  "微软雅黑=微软雅黑",
  "新宋体=新宋体",
  "黑体=黑体",
  "楷体=楷体",
  "隶书=隶书",
  "Courier New=courier new,courier",
  "AkrutiKndPadmini=Akpdmi-n",
  "Andale Mono=andale mono,times",
  "Arial=arial,helvetica,sans-serif",
  "Arial Black=arial black,avant garde",
  "Book Antiqua=book antiqua,palatino",
  "Comic Sans MS=comic sans ms,sans-serif",
  "Courier New=courier new,courier",
  "Georgia=georgia,palatino",
  "Helvetica=helvetica",
  "Impact=impact,chicago",
  "Symbol=symbol",
  "Tahoma=tahoma,arial,helvetica,sans-serif",
  "Terminal=terminal,monaco",
  "Times New Roman=times new roman,times",
  "Trebuchet MS=trebuchet ms,geneva",
  "Verdana=verdana,geneva",
  "Webdings=webdings",
  "Wingdings=wingdings,zapf dingbats"
];
export default {
  components: {
    Editor
  },
  props: {
    //内容
    value: {
      type: String,
      default: ''
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 用于区分单个tinymce
    tinymceId: {
      type: String,
      default: "tinymce"
    },
    //插件
    plugins: {
      type: [String, Array],
      default: 'advlist autolink link image lists charmap  media wordcount'
    },
    //工具栏
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table'
    },
    menubar: {
      type: String,
      default: "file edit insert view format table",
    },
    height: {
      type: [Number, String],
      required: false,
      default: 600,
    },
    width: {
      type: [Number, String],
      required: false,
      default: "auto",
    },
  },
  data() {
    return {
      //初始化配置
      myValue: this.value,
      init: {
        selector: '#' + this.tinymceId,
        language_url: zh_CN,//汉化路径是自定义的，一般放在public或static里面
        language: 'zh_CN',
        skin_url: skin_url,//皮肤
        plugins: this.plugins,//插件
        //工具栏
        toolbar: this.toolbar,
        toolbar_location: '/',
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',  //字体大小
        font_formats: fonts.join(";"),
        // content_style: "p {margin: 0px; border:0px ; padding: 0px}",  // 设置p的行间距
        height: this.height,//高度
        placeholder: this.myValue,
        menubar: this.menubar,
        // powerpaste_word_import: "clean",
        code_dialog_height: 450,
        code_dialog_width: 1000,
        branding: false,//隐藏右下角技术支持
        //图片上传
      }
    }
  },
  watch: {
    //监听内容变化
    value(newValue) {
      this.myValue = (newValue == null ? '' : newValue)
    },
    myValue(newValue) {
      if (this.triggerChange) {
        this.$emit('change', newValue)
      } else {
        this.$emit('input', newValue)
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    //可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = ''
    }
  },
  computed: {
    containerWidth() {
      const width = this.width;
      if (/^[\d]+(\.[\d]+)?$/.test(width)) {
        // matches `100`, `'100'`
        return `${width}px`;
      }
      return width;
    },
  },
}
</script>


<style scoped>
.tinymce-container {
  position: relative;
  line-height: normal;
}
.tinymce-container >>> .mce-fullscreen {
  z-index: 10000;
}
.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}
.editor-custom-btn-container {
  position: absolute;
  right: 4px;
  top: 4px;
  /*z-index: 2005;*/
}
.fullscreen .editor-custom-btn-container {
  z-index: 10000;
  position: fixed;
}
.editor-upload-btn {
  display: inline-block;
}
</style>
